<template>
  <div id="ProjectLayout">
    <a-layout style="height: 400px">
      <a-layout-header class="Header">
        <div class="titleImg">
          <img style="height: 60%" src="../assets/logo-1.png"/>
          <div class="title">网络智能抗毁模拟系统</div>
        </div>

      </a-layout-header>
      <a-layout-content class="Content">
        <div style="background: rgba(236,236,236,0.5); padding: 30px;width: 50%; margin: 0 auto">
          <a-card style="width: 100%;min-height: 60vh">
            <template #extra><a @click="addProject" style="font-size: 18px;">添加项目</a></template>
            <template #title>
              <div style="font-weight: bolder;font-size: 24px;">项目列表</div>
            </template>

            <a-table :columns="columns" :data-source="projectList" :pagination="{pageSize:6}">
<!--              表头设定-->
<!--              <template #headerCell="{ column }">-->
<!--                <template v-if="column.key === 'name'">-->

<!--                </template>-->
<!--              </template>-->

              <template #bodyCell="{ column, record }">
                <template v-if="column.key === 'name'">
                  <a @click="selectProject(record)">
                    {{ record.name }}
                  </a>
                </template>

                <template v-else-if="column.key === 'action'">
                    <a-space>
                      <a @click="selectProject(record)">访问</a>
                      <a @click="delProject(record.name)">删除</a>
                    </a-space>
                </template>
              </template>
            </a-table>
          </a-card>
        </div>

      </a-layout-content>
      <a-layout-footer class="Footer">Footer</a-layout-footer>
    </a-layout>
  </div>
  <a-modal v-model:open="projectAdd" title="项目信息" :footer="null">
    <a-form
        :model="projectState"
        name="basic"
        :label-col="{ span: 6 }"
        :wrapper-col="{ span: 16 }"
        autocomplete="off"
        @finish="handleProjectAddOk"
    >
      <a-form-item
          label="项目名称"
          name="name"
          :rules="[{ required: true, message: '请输入项目名称!' }]"
      >
        <a-input v-model:value="projectState.name" />
      </a-form-item>

      <a-form-item :wrapper-col="{ offset: 8, span: 16 }">
        <a-button type="primary" html-type="submit">提交信息</a-button>
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script setup>
import {Service} from "../requests/services/Service";
import {onMounted, ref} from "vue";
import useProject from "../store/project.js";
import {storeToRefs} from "pinia";
import {useRouter} from "vue-router";

const router=useRouter()
const projectStore = useProject();
const {projectList} = storeToRefs(projectStore);
// console.log("projectList",projectList);
const projectAdd = ref(false);
const projectState = ref({});
const columns = [
  {
    title: '项目名称',
    dataIndex: 'name',
    key: 'name',
  },

  {
    title: '操作',
    key: 'action',
  },
];
onMounted(() => {
  projectStore.getProjectList();
})
const handleProjectAddOk=()=>{
  projectAdd.value=false;
  // console.log("handleProjectAddOk",projectState.value)
  projectStore.addProjectList(projectState.value)
}
const addProject=()=>{
  projectAdd.value=true;
  console.log("addProject");
}
const selectProject=(e)=>{
  console.log("selectProject",e);
  projectStore.selectCurrentProject(e.name);
  router.push({path: '/NetworkElement'})
}
const delProject=(e)=>{
  projectStore.deleteProjectList(e)
  console.log("delProject",e);
}
</script>

<style scoped>
#ProjectLayout {
  height: 100%;
  background: url("./src/assets/background.png") 0% 0% / 100% 100%;
  display: flex;
  flex-direction: column;
  background-size: cover;
  min-height: 100vh;
}

#ProjectLayout .Header {
  /*background-color: rgba(255, 0, 255, 0);*/
  margin-top: 10px;
  background: url("./src/assets/background.png") 0% 0% / 100% 100%;
  min-height: 15vh;
  /*margin-bottom: 16px;*/
}

#ProjectLayout .Content {
  height: 80%;
  background: url("./src/assets/background.png") 0% 0% / 100% 100%;
  padding: 20px;
  margin-bottom: 16px;
  min-height: 70vh;
}

#ProjectLayout .Footer {
  padding: 16px;
  position: sticky;
  bottom: 0;
  right: 0;
  left: 0;
  text-align: center;
}

.titleImg {
  width: 50%;
  height: 128px;
  display: flex;
  align-items: center;
  justify-content: center; /* 在水平方向上居中 */
  margin: 0 auto;
}

.title {
  color: #015a60;
  overflow: clip;
  font-weight: bolder;
  font-size: 36px;
  margin-left: 12px;
}
</style>